<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    Header
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    Footer
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Left" collapsible="true">
                    <h:form>
                        <p:menu>
                            <p:submenu label="Resources">
                                <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
                                <p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
                                <p:menuitem value="Forum" url="http://forum.primefaces.org/" />
                                <p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />

                            </p:submenu>

                        </p:menu>
                    </h:form>

                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <!--                    <p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
                                            <f:facet name="default">
                                                <h:outputText value="Status: StandBy" />
                                            </f:facet>
                    
                                            <f:facet name="start">
                                                <img src="Recursos/Images/hex-loader2.gif"/>
                                            </f:facet>
                    
                                            <f:facet name="complete">
                                                <h:outputText value="Status: Completed" />
                                            </f:facet>
                                        </p:ajaxStatus>
                    
                                        <p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
                    
                                        <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
                                            <img src="Recursos/Images/hex-loader2.gif"/>
                                                                    <p:graphicImage name="/Recursos/Images/hex-loader2.gif" />
                                        </p:dialog>-->

                    <h:form>
                        <h:panelGrid columns="2" cellpadding="5" id="grid">
                            <f:facet name="header">
                                <p:messages id="msgs" />
                            </f:facet>
                            <h:outputLabel for="name" value="usuario:" style="font-weight:bold" />
                            <p:inputText id="usuario" value="#{sesion.usuario}" />

                            <h:outputLabel for="name" value="clave:" style="font-weight:bold" />
                            <p:password id="clave" value="#{sesion.clave}" feedback="true"  />


                        </h:panelGrid>
                        <h:panelGroup>
                            <p:commandButton value="iniciar sesión" update="grid" icon="ui-icon-check" actionListener="#{sesion.save}" />
                            <h:outputText id="display" value="#{sesion.usuario} - #{sesion.clave}" />
                        </h:panelGroup>


                        <!--                        <p:commandButton value="Send" icon="ui-icon-refresh" />-->
                    </h:form>
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

